<template>
  <div class="chuantu kflexc" style="width: 1000px;">
    <div style="text-align: center;" v-if="img">已上传文件</div>
    <div style="width: 178px;">
      <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :on-change="uploadok"
        :auto-upload="false" :show-file-list="false">
        <el-button size="small" type="text">上传文件</el-button>
        <!-- <img v-if="img" :src="img" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        <div v-if="img" style="position: absolute; right: 5px; top: 5px; border-radius: 2px; padding: 2px 15px; z-index: 999; background: rgba(0, 0, 0, 0.5); color: #fff; line-height: 25px;" @click.stop="shanchu()">删除</div> -->
      </el-upload>
    </div>


  </div>
</template>

<script>
  import axios from "axios";
  import * as qiniu from 'qiniu-js'
  export default {
    name: 'file',
    props:['imgs'],
    data() {
      return {
        img: ""
      }
    },
    created() {
      if(this.imgs){
        this.img = this.imgs
      }
      console.log(this.imgs)
    },
    methods: {
      shanchu:function(){
        this.img = ""
        this.$emit('getimg', "")
      },
      dataURLtoFile(dataurl, filename) {
        let arr = dataurl.split(","),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {
          type: mime
        });
      },
      uploadok: function(file,fileList) {
              console.log(file)
              this.fileList = []
              var that = this

              axios.get(`/api/system/qiniu/upload_token2`,{
                params:{bucket:'test91'}
              })
                .then(response => {
                  if(response.data.msg.code == 0){
                    const observer = {
                      next(res){
                        // console.log(res)
                        // ...
                      },
                      error(err){
                        console.log(err)
                        // ...
                      },
                      complete(res){
                        console.log(res)
                        console.log("https://test91.91haoka.cn/"+res.data)
                        that.$emit('getimg', "https://test91.91haoka.cn/"+res.data)
                        that.fileList.push({name:file.raw.name,url:"https://test91.91haoka.cn/"+res.data})
                        that.txform.file = "https://test91.91haoka.cn/"+res.data
                      }
                    }

                    const observable = qiniu.upload(file.raw, file.raw.name, response.data.data, {}, {})
                    console.log(file.raw, file.raw.name, response.data.data, {}, {})
                    const subscription = observable.subscribe(observer) // 上传开始
                  }else{
                    this.$message.error(response.data.msg.info);
                  }
                });
            },

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    .avatar-uploader{
    	width: 100%;
    }

    .avatar-uploader .el-upload:hover {
    	border-color: #409EFF;
    }

    .avatar-uploader-icon {
    	font-size: 28px;
    	color: #8c939d;
    	width: 178px;
    	height: 178px;
    	line-height: 178px;
    	text-align: center;
    }

    /deep/ .el-upload {
    	max-width: 178px;
    	max-height: 178px;
    	display: flex;
      align-items: center;
      justify-content: center;
    }
    /deep/ .el-upload img{ max-width: 178px; max-height: 178px;}
</style>
